<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>我的商品</title>
      <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
      <style>
      body{
        width: 100%;
      }
      .top{
        width:100%;
        height: 40px;
        margin: 40px auto 0px;
        background: #f5f5f5;
        color:#000;
        border:0px;
        display: block;
        text-align: center;
      }
      .leftreturn{
        position: absolute;
        left:0;
        z-index: 5;
        background-image: url("../../image/leftreturn.png");
        background-position: 0px 0px;
        width:25px;
        height:25px;
        margin:7.5px 0;
      }
      .top-title{
        line-height: 40px;
        font-size: 20px;
      }
      .tabs{
             width:100%;height:400px;float:left;  background: #fafafa;
         }
      #container{
             width:100%;height:auto;float:left;   background: #fafafa;
         }
       .ct-ul{
             width:100%;height:30px;float:left;margin:0px;padding:0px;
         }
         .ct-ul li{
             width:25%;float:left ;font-size:14px;margin:0px;line-height: 30px;
             text-align: center;
              display: inline;
         }
         .act{
           color: #4A87A1;
         }
        li:hover{
         color: #4A87A1;

         display: inline-block;
         cursor: pointer;
        }
      .sp{
        width:90%;
        height:auto;
        margin: 10px auto;
      	background: white;
      	color:#000000;
        border: 1px solid #ccc;
        border-radius: 8px;
      	font-size: 14px;
        padding-bottom: 5px;
      }
      .sp_top{
        width:auto;height:40px;
        margin-top: 10px;
      }
      .sp_dd{
        width:auto;
        height:35px;
        padding: 0 15px;
        line-height: 35px;
        text-align: center;
        border: 1px solid #ccc;
        border-radius: 15px;
        float: right;
        margin-right: 8px;
        color: #444343;
      }
      .picture{
        width:100%;
        height:0;
        padding-bottom: 100%;
        position: relative;
        margin-bottom: -30px;
      }
      .sp_money{
        font-size: 20px;
        padding:0 20px;
        font-weight: bold;
      }
      .sp_yunfei{
        font-size: 12px;
        font-weight: normal;
        float: right;
      }
      .sp_title{
        padding: 5px 20px;
        font-size: 14px;
        font-family: sonti;

      }
      .sp_kucun{
        width:100%;
        font-size: 14px;
        text-align: center;
      }
      </style>
  </head>
  <body>
    <div class="top">
      <i class="leftreturn" onclick="Winclose();"></i>
      <h1 class="top-title">我的商品</h1>

    </div>
    <div class="tabs">
        <nav id="nav">
           <ul class="ct-ul">
             <li class="act">全部商品</li>
             <li>土特产</li>
             <li>美食外卖</li>
             <li>超市美食</li>
           </ul>
        </nav>
        <div id="container">
           <section class="tab" >
            <div class="item" id="item1"></div>
           </section>
           <section class="tab" >
             <div class="item" id="item2"></div>
           </section>
           <section class="tab" >
             <div class="item" id="item3"></div>
           </section>
           <section class="tab" >
             <div class="item" id="item4"></div>
           </section>
         </div>

  </body>
  <script type="text/javascript" src="../../script/api.js"></script>
  <script type="text/javascript" src="../../script/doT.min.js"></script>
  <script type="text/javascript" src="../../script/SHA1.js"></script>

  <script type="text/x-dot-template"id="tmpl-1">
  {{ for(var prop in it) { }}
  <div class="sp">
    <div class="sp_top">
      <p class="sp_dd">编辑商品</p>
      <p class="sp_dd">删除商品</p>
    </div>
    <div class="picture">
      <img src="{{=it[prop].cimage.url}}" alt=""
      style="width:90%;height:90%;text-align:center;position:absolute;top:0;left:5%;">
    </div>
    <div class="sp_footer">
      <p class="sp_money">
        {{=it[prop].cprice}}
        <span class="sp_yunfei">
          运费：{{=it[prop].postage}}
        </span>
      </p>
      <p class="sp_title">{{=it[prop].cname}}</p>
      <p class="sp_kucun">库存：{{=it[prop].amount}}</p>
    </div>
  </div>
    {{ } }}
  </script>

  <script type="text/x-dot-template"id="tmpl-2">
  {{ for(var prop in it) { }}
  {{? it[prop].variety =='ttc'}}
  <div class="sp">
    <div class="sp_top">
      <p class="sp_dd">编辑商品</p>
      <p class="sp_dd">删除商品</p>
    </div>
    <div class="picture">
      <img src="{{=it[prop].cimage.url}}" alt=""
      style="width:90%;height:90%;text-align:center;position:absolute;top:0;left:5%;">
    </div>
    <div class="sp_footer">
      <p class="sp_money">
        {{=it[prop].cprice}}
        <span class="sp_yunfei">
          运费：{{=it[prop].postage}}
        </span>
      </p>
      <p class="sp_title">{{=it[prop].cname}}</p>
      <p class="sp_kucun">库存：{{=it[prop].amount}}</p>
    </div>
  </div>
    {{?}}
    {{ } }}
  </script>

  <script type="text/x-dot-template"id="tmpl-3">
  {{ for(var prop in it) { }}
  {{? it[prop].variety =='mswm'}}
  <div class="sp">
    <div class="sp_top">
      <p class="sp_dd">编辑商品</p>
      <p class="sp_dd">删除商品</p>
    </div>
    <div class="picture">
      <img src="{{=it[prop].cimage.url}}" alt=""
      style="width:90%;height:90%;text-align:center;position:absolute;top:0;left:5%;">
    </div>
    <div class="sp_footer">
      <p class="sp_money">
        {{=it[prop].cprice}}
        <span class="sp_yunfei">
          运费：{{=it[prop].postage}}
        </span>
      </p>
      <p class="sp_title">{{=it[prop].cname}}</p>
      <p class="sp_kucun">库存：{{=it[prop].amount}}</p>
    </div>
  </div>
    {{?}}
    {{ } }}
  </script>

  <script type="text/x-dot-template"id="tmpl-4">
  {{ for(var prop in it) { }}
  {{? it[prop].variety =='csyp'}}
  <div class="sp">
    <div class="sp_top">
      <p class="sp_dd">编辑商品</p>
      <p class="sp_dd">删除商品</p>
    </div>
    <div class="picture">
      <img src="{{=it[0].cimage.url}}" alt=""
      style="width:90%;height:90%;text-align:center;position:absolute;top:0;left:5%;">
    </div>
    <div class="sp_footer">
      <p class="sp_money">
        {{=it[prop].cprice}}
        <span class="sp_yunfei">
          运费：{{=it[prop].postage}}
        </span>
      </p>
      <p class="sp_title">{{=it[prop].cname}}</p>
      <p class="sp_kucun">库存：{{=it[prop].amount}}</p>
    </div>
  </div>
    {{?}}
    {{ } }}
  </script>

  <script type="text/javascript">
      apiready = function(){
            init();
      };

     //初始化本页面
      function init(){

        var user = $api.getStorage('user');

        //获取X-APICloud-AppKey值
        var now = Date.now();
        appKey = SHA1("A6032422409194"+"UZ"+"808CF36B-60D4-DC5D-C9F3-FB49F9E1FB44"+"UZ"+now)+"."+now


        api.ajax({
            url: "https://d.apicloud.com/mcm/api/user/"+user[0].id+"/commodity",
            method: 'get',
            cache: false,
            headers:{
              "X-APICloud-AppId": "A6032422409194",
              "X-APICloud-AppKey": appKey
            }
        },function(ret, err){
            if (ret) {
              //使用doT模板将用户信息放入html中
              // 编译模板函数
              tmpltxt=doT.template(document.getElementById("tmpl-1").innerHTML);//生成模板方法
              document.getElementById("item1").innerHTML=tmpltxt(ret);//数据渲染

              //使用doT模板将用户信息放入html中
              // 编译模板函数
              tmpltxt=doT.template(document.getElementById("tmpl-2").innerHTML);//生成模板方法
              document.getElementById("item2").innerHTML=tmpltxt(ret);//数据渲染

              //使用doT模板将用户信息放入html中
              // 编译模板函数
              tmpltxt=doT.template(document.getElementById("tmpl-3").innerHTML);//生成模板方法
              document.getElementById("item3").innerHTML=tmpltxt(ret);//数据渲染

              //使用doT模板将用户信息放入html中
              // 编译模板函数
              tmpltxt=doT.template(document.getElementById("tmpl-4").innerHTML);//生成模板方法
              document.getElementById("item4").innerHTML=tmpltxt(ret);//数据渲染
            } else {
                alert("数据库连接失败");
            }
        });

      }
  </script>



  <script>
   window.onload=function () {
   var nav=document.getElementById('nav');
   var oNav=nav.getElementsByTagName('li');

   var container=document.getElementById('container');
   var oDiv=container.getElementsByClassName('tab');
   for(var i=0;i<oNav.length;i++){
    oNav[i].index=i;
    oNav[i].onclick=function () {
    for(var i=0;i<oNav.length;i++){
     oNav[i].className='';
     oDiv[i].style.display="none";
    }
    this.className='act';
    oDiv[this.index].style.display="block"
    }
    for(var m=1;m<oNav.length;m++){
     oNav[m].className='';
     oDiv[m].style.display="none";
    }
   }
   };

    function Winclose() {
     api.closeWin();
   }
  </script>
  </html>
